<template>
  <div
    class="serviceContent"
    id="home"
  >
    <z-main-content v-if="showNum===-1"></z-main-content>
    <z-product v-if="showNum===0"></z-product>
    <z-resettlement v-if="showNum===1"></z-resettlement>
    <z-summer v-if="showNum===2"></z-summer>
    <z-internship v-if="showNum===3"></z-internship>
    <z-single v-if="showNum===4"></z-single>
  </div>
</template>
<script>
import ZMainContent from './main-content'
import ZProduct from './product-outsourcing'
import ZResettlement from './resettlement'
import ZSummer from './summer'
import ZInternship from './internship'
import ZSingle from './single'
export default {
  components: { ZProduct, ZResettlement, ZMainContent, ZSummer, ZInternship, ZSingle },
  props: {
    servieId: Object
  },
  data() {
    return {
      showNum: 0
    }
  },
  mounted() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
  },
  watch: {
    servieId(n) {
      if (n.key === '2-1') {
        this.showNum = 0;
      } else if (n.key === '2-2') {
        this.showNum = 1;
      } else if (n.key === '2-0') {
        this.showNum = -1;
      } else if (n.key === '2-5') {
        this.showNum = 2;
      } else if (n.key === '2-3') {
        this.showNum = 3;
      } else if (n.key === '2-4') {
        this.showNum = 4;
      }
    }
  }
}
</script>
<style scoped>
.serviceContent {
  width: 100%;
}
</style>

